<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--如果在组件标签上使用v-on指令 代表的是给当前组件注册了vue自定义事件!-->
        <!--如果在普通标签上使用v-on指令 代表的是给当前标签注册了dom事件!-->

        <!--v-btn.$on("click",clickFn)-->
        <v-btn @xxx="xxxFn"></v-btn>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    //根组件app
    new Vue({
        el:"#app",
        methods:{
            xxxFn(){console.log("root click")}
        },
        components:{
            "v-btn":{
                template:"<button @click='clickFn'>点我啊</button>",
                methods:{
                    clickFn(){
                        this.$emit("xxx")
                    }
                }
            }
        }
    })
</script>
</html>